<!--  -->
<template>
  <div class="app-container">
    <!-- 页面功能 -->
    <div v-if>
      <el-form :inline="true" size="small">
        <el-form-item label="帖子编号">
          <el-input
            v-model="artileId"
            placeholder="请输入帖子编号"
            size="small"
          ></el-input>
        </el-form-item>

        <el-form-item label="类型">
          <el-select size="small" v-model="classify" placeholder="帖子类型">
            <el-option label="文字" value="text"></el-option>
            <el-option label="图片" value="image"></el-option>
            <el-option label="视频" value="video"></el-option>
          </el-select>
        </el-form-item>
        <el-button icon="el-icon-search" type="primary" size="small" @click
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
        <el-button icon="el-icon-delete" type="danger" size="small" @click
          >删除</el-button
        >
      </el-form>
      <el-button
        type="primary"
        icon="el-icon-document-copy"
        size="small"
        @click="toCategory"
        >帖子分类管理</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-warning-outline"
        size="small"
        style="margin-left: 15px"
        @click="toIllega"
        >非法字符集管理</el-button
      >

      <span style="margin-left: 20px">文字帖自动审核：</span>
      <el-switch
        v-model="autoReview"
        :active-value="true"
        :inactive-value="false"
        @change
      />
    </div>
    <!-- 表格 -->
    <div style="margin-top: 20px">
      <el-table :data="cate_list" border stripe>
        <el-table-column type="selection" align="center" width="60" />
        <template v-for="(col, index) in columns">
          <el-table-column
            v-if="index <= 3"
            :key="col.id"
            :label="col.label"
            align="center"
            :width="col.width"
            :prop="col.data"
          />

          <el-table-column
            v-else-if="index == 4"
            :key="col.id"
            :label="col.label"
            align="center"
            :width="col.width"
          >
            <template slot-scope="scope">
              <el-image
                :src="scope.row.cover"
                fit="fill"
                :lazy="true"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="index == 5"
            :key="col.id"
            :label="col.label"
            align="center"
            :width="col.width"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.inHome"
                :active-value="1"
                :inactive-value="2"
                @change
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="index == 6"
            :key="col.id"
            :label="col.label"
            align="center"
            :width="col.width"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.inJimei"
                :active-value="1"
                :inactive-value="2"
                @change
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="index == 7"
            :key="col.id"
            :label="col.label"
            align="center"
            :width="col.width"
          >
          
            <template slot-scope="scope">
              <div class="sta">{{ scope.row.status }}</div>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              :disabled="scope.row.status != '等待人工审核'"
              type="text"
              icon="el-icon-stopwatch"
              @click="edit(scope.row)"
              >审核</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              style="color: #f66"
              @click="deleteCategory(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="pageData.page"
        :page-sizes="[20, 40, 80, 100]"
        :page-size="pageData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      />
    </div>

    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="showEdit" width="40%">
      <div class="dTitle">帖子信息</div>
      <div class="dList">
        <div class="dLabel">帖子编号</div>
        <div class="dCon">{{ uData.id }}</div>
      </div>
      <div class="dList">
        <div class="dLabel">帖子文案</div>
        <div class="dCon">{{ uData.content }}</div>
      </div>
      <div class="dList">
        <div class="dLabel">所属分类</div>
        <div class="dCon">{{ uData.belong }}</div>
      </div>
      <div class="dList">
        <div class="dLabel">帖子类型</div>
        <div class="dCon">{{ uData.classify }}</div>
      </div>

      <div class="dList" v-if="uData.classify == '视频'">
        <div class="dLabel"></div>
        <!-- <el-image :src="uData.cover" z-index='3000' style="width:200px" fit="fill" :previewSrcList="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']" :lazy="true"></el-image> -->

        <video
          src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
          @click="showVideo = true"
          style="width: 300px"
        ></video>
      </div>
      <el-dialog
        :visible.sync="showVideo"
        width="50%"
        custom-class="my-el-dialog"
        append-to-body
        @close="show"
      >
            <!-- src="https://vd2.bdstatic.com/mda-jjvrrnwcmyag15tg/mda-jjvrrnwcmyag15tg.mp4?v_from_s=tc_haokan_4469&auth_key=1617778459-0-0-270fddad21eec6b42e3ebde50bba00ed&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=3000156_1" -->
            <video
            v-if="showVideo"
            ref="video"
            src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
            controls
            autoplay
            @click="showVideo = true"
            style="width:100%;max-height: 80vh"
          ></video>
      </el-dialog>

      <div class="dList" v-if="uData.classify == '图片'">
        <div class="dLabel"></div>
        <el-image
          :src="uData.cover"
          z-index="3000"
          style="width: 200px"
          fit="fill"
          :previewSrcList="[
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          ]"
          :lazy="true"
        ></el-image>
      </div>

      <div class="dTitle" style="margin: 20px 0 10px 10px">操作</div>
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="170px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="是否推荐至首页" prop="inHome">
          <el-switch
            v-model="form.inHome"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="是否置顶至集美圈" prop="inHome">
          <el-switch
            v-model="form.inJimei"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="审核">
          <el-select
            v-model="form.status"
            value-key=""
            placeholder=""
            clearable
            filterable
            @change=""
          >
            <el-option label="通过" value="allow" />
            <el-option label="不通过" value="oppose" />
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="showEdit = false">取消</el-button>
        <el-button type="primary" @click="">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classify: "",
      artileId: "",
      autoReview: "",
      createData: {}, //新增
      uData: {}, //编辑
      showAdd: false,
      showEdit: false,
      showVideo: false,
      videoWidth:'50%',
      rules: {},
      i: "", //cate_id
      pageData: {
        page: 1,
        limit: 10,
      },
      total: 10,
      cate_list: [
        {
          id: "1",
          content: "帖子文案帖子文案帖子文案帖子文案帖子文案",
          belong: "分类名称1",
          classify: "文字",
          cover:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          inHome: 1,
          inJimei: 2,
          status: "已自动审核",
        },
        {
          id: "2",
          content: "帖子文案帖子文案帖子文案帖子文案帖子文案",
          belong: "分类名称2",
          classify: "视频",
          cover:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          inHome: 2,
          inJimei: 1,
          status: "等待人工审核",
        },
        {
          id: "3",
          content: "帖子文案帖2333子文案帖子文案帖子文案帖子文案",
          belong: "分类名称3",
          classify: "图片",
          cover:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          inHome: 2,
          inJimei: 1,
          status: "已人工审核",
        },
      ],
      form: {},
      rules: {
        inHome: [{ required: true }],
      },
      columns: [
        { key: 0, label: `帖子编号`, data: "id", width: 80 },
        { key: 1, label: `帖子文案`, data: "content", width: 230 },
        { key: 2, label: `所属分类`, data: "belong" },
        { key: 3, label: `帖子类型`, data: "classify" },
        { key: 4, label: `图片/视频`, data: "cover" },
        { key: 5, label: `是否推荐至首页`, data: "inHome", width: 120 },
        { key: 6, label: `是否推荐至集美圈`, data: "inJimei", width: 120 },
        { key: 7, label: `审核状态`, data: "status", width: 140 },
      ],
    };
  },
  created() {

  },

  methods: {
    getCategoryList() {
      categoryList().then((r) => {
        if (r.code == "200") {
          console.log(this.cate_list);
        } else {
          this.$message.error(r.msg);
        }
      });
    },
    add() {
      this.showAdd = true;
    },
    edit(i) {
      this.uData = i;
      this.showEdit = true;
    },
    detail(i) {
      this.i = i;
    },
    createCategory() {},
    getCategoryDetail() {},
    updateCategory(i) {},
    deleteCategory(i, d) {
      this.$confirm("确认删除所选数据？", "确认删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.cate_list.splice(i, 1);
        })
        .catch(() => {});
    },
    beforeCoverUpload() {},

    sizeChange(a) {
      this.pageData.limit = a;
    },
    currentChange(a) {
      this.pageData.page = a;
    },
    show(){
      console.log(this.$refs.video);
    },
    // 页面跳转
    toCategory() {
      this.$router.push("/jimeiquanzi/category");
    },
    toIllega() {
      this.$router.push("/jimeiquanzi/illegal");
    },
  },
};
</script>
<style>
.df {
  display: flex;
  align-items: center;
}

.sta{
   width: 100px;
  color: #333;
  margin: 0 auto;
  border: 1px solid #333;
  background: #fff;
  border-radius: 20px;
}

.sok {
  width: 100px;
  color: #333;
  margin: 0 auto;
  border: 1px solid #333;
  background: #fff;
  border-radius: 20px;
}
.sfail {
  width: 100px;
  color: #f56c6c;
  margin: 0 auto;
  border: 1px solid #f56c6c;
  background: #fff;
  border-radius: 20px;
}
.btnBox {
  height: 130px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}
.btnBox .el-button {
  margin: 0;
}
.detailLog div {
  margin: 10px;
  color: #000;
  font-size: 16px;
}
.detailLog .dbox {
  display: flex;
  flex-wrap: wrap;
}
.detailLog .dbox > div {
  width: 46%;
  margin: 10px 0;
}

.my-el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  max-height: calc(100% - 20px);
  max-width: calc(100% - 20px);
}
.my-el-dialog .el-dialog__body {
  display: flex;
  justify-content: center;
  flex: 1;
  overflow: auto;
}
</style>
